<template>
	<!--横屏直播-->
	<div class="landscape-live-box">
		<van-notice-bar v-if="isAudit" left-icon="info-o" scrollable text="您当前的直播间为审核状态，仅用于预览，请尽快完成审核" />
		<!-- <Header  :headerObj = 'headerObj'  /> -->
        <Privacy v-if="isPrivacy"></Privacy>
		<PreviewPage v-if="isPreviewPage" :shoppingDataInfo='shoppingDataInfo' :roomInfo='roomInfo'  @formChildMsg='formChildData' />
		<VideoCom ref='videoCom' :videoInfo='roomInfo.roomInfo' type='wScreen' status="living" />
		<vue-baberrage :isShow="barrageIsShow" :barrageList="barrageList" :loop="barrageLoop" :boxWidth='500'
			:boxHeight='145' :messageHeight='8' :throttleGap='1000'>
		</vue-baberrage>
		<!-- <div class="video-cover-box" v-if="videoCoverBox">
			<img class="cover-video-img"
				:src="roomInfo.roomInfo.preImagUrl + '?x-oss-process=image/resize,m_fixed,h_424,w_750'"
				v-show="roomInfo.roomInfo.preImagUrl && roomInfo.roomInfo.preImagUrl != '' " />
			<div class="play-btn" v-if='isPlayBtn' @click="playBtn"></div>
		</div> -->
	 <!--跑马灯组件 animate__animated animate.css库class -->
    <MarqueeBar :isMarquee='isMarquee' :text='marqueeArray[0]' @formChildMsg='formChildData' :noticeBbarClass="noticeBbarClass"></MarqueeBar>
		<!--进入直播间提示-->
		<transition name="showRect" @before-enter="TipUnBeforeEnter" @enter="TipUnEnter" @after-enter="TipUnAfterEnter"
			@before-leave="TipUnBeforeLeave" @leave="TipUnLeave" @after-leave="TipUnAfterLeave" :css="false">
			<div v-show="marqueeTipUnShow" class="marquee-tip" :class="[marqueeTipClass]">
				<p><span>{{marqueeTipUnArray[0]}}</span>{{comeTip}}</p>
			</div>
		</transition>
		<!--开播提醒成功提示组件-->
		<LiveRemindSuccess v-if='isLiveRemindSuccess' @formChildMsg='formChildData' />
		<!-- 房间信息组件-->
		<MiddleLiveInfoCom :roomInfo="roomInfo" :roomNum='roomNum' :isPublic='isPublic' :socketHdCount='socketHdCount'
			@formChildMsg='formChildData' />
		<!-- tab组件 -->
		<MiddleNavCom :navTabArray="navTabArray" v-if='isNoNav' @formChildMsg='formChildData' />
		<!--内容区域动态组件-->
		<keep-alive>
			<component ref='refContent' :redPacketMsgData='redPacketMsgData' :isPublic='isPublic' :roomInfo="roomInfo"
				:is='isContentCom' :socketLoveMsg='socketLoveMsg' :socketGiftMsg='socketGiftMsg' :imMsgItem='imMsgItem'
				:imOfficalMsgItem='imOfficalMsgItem' :imReplyMsgItem='imReplyMsgItem' :noNavLength='noNavLength'
				:isFrom="'landscapeLiveCom'" @formChildMsg='formChildData'></component>
		</keep-alive>
		<!--一键下单组件-->
		<!-- <ShoppingBtn v-if='isShoppingBtn' :isPublic='isPublic'  @formChildMsg='formChildData' :roomInfo="roomInfo" /> -->
		<!--右边互动区域组件-->
		<!--<LsInteractionRightCom/>-->
		<!--右边互动按钮组件-->
		<InteractionRightCom :roomInfo='roomInfo' :shoppingDataInfo='shoppingDataInfo' :isPublic='isPublic' :activityArray='activityArray'
			@formChildMsg='formChildData' :isLsPoScreen="'LscreenLive'" ref="childRightWrap" />
		<!-- 红包组件 -->
		<RedPacketCom v-if="isRedPacketCom" :key="renderCom" :redPacketData='redPacketData' :redEnterType='enterType'
			:sid='roomInfo.roomInfo.sid' :list='redListParent' @formChildMsg='formChildData' />
		<!-- 送礼物操作面板 -->
		<div v-if="showSendMask" class="gift-bg-mask" @click="hideGiftPanelHandle"></div>
		<transition appear name="sendGiftBox" @before-enter="sheetBeforeEnter" @enter="sheetEnter"
			@after-enter="sheetAfterEnter" @before-leave="sheetBeforeLeave" @leave="sheetLeave">
			<SendGift v-if='showGiftPanelFlag' :roomInfo='roomInfo' @formChildMsg='formChildData'>
			</sendGift>
		</transition>
		<!--送礼物提示-->
		<transition name="sendGiftPanel" @before-enter="TipUnBeforeEnters" @enter="TipUnEnters"
			@after-enter="TipUnAfterEnters" @before-leave="TipUnBeforeLeaves" @leave="TipUnLeaves"
			@after-leave="TipUnAfterLeaves">
			<GiftTips v-show='showSendGiftFlag'></GiftTips>
		</transition>
		<!--邀请卡组件-->
		<InvitationCard v-if='isInvitationCard' @formChildMsg="formChildData" fromComPage = "live" :liveInfo="roomInfo.roomInfo" />
		<!-- 打赏组件 -->
		<LiveReward v-if="isRewardBtn" :rewardInfo="roomInfo.marketQR" />
		<!-- zyzq 温馨提示 组件 -->
		<component :is="isCom"></component>
		<!-- 商品讲解组件 -->
		<ProductExplain @getProduct="getProduct" :roomInfo="roomInfo" v-if="isProductShow" :productObj="productObj"
			:isLandscapeLive="'true'" />
		<!--抽奖组件-->
		<TurntableCom v-if='isTurntable' :key='lotteryNum' :winInfoData='winInfoData' :startLotteryObj='startLotteryObj'
			@formChildMsg='formChildData' :roomInfo="roomInfo" fromCom="fromLivePrizeCom" />
		<!-- 全局背景层组件 -->
		<GlobalMask @formChildMsg='formChildData' v-if="isGlobalMask" />
		<!-- 底部弹出 动作面板 -->
		<!-- liveWinArray 直播间抽奖中奖数组 -->
		<transition appear name="actionSheetBox" @before-enter="sheetBeforeEnter" @enter="sheetEnter"
			@after-enter="sheetAfterEnter" @before-leave="sheetBeforeLeave" @leave="sheetLeave">
			<ActionSheet :is='showActionSheet' :liveWinArray='liveWinArray' :activeDataArray='activeDataArray'
				:activeTitle='activeTitle' :roomInfo='roomInfo'
				@formChildMsg='formChildData'></ActionSheet>
		</transition>
		<!--直播已下架 国盛风险提示 gsTipShow -->
		<PopUp v-if="gsTipShow" :isPublic='isPublic' :tipContent='tipContent' @formChildMsg='formChildData'></PopUp>
		<ZanAnimation></ZanAnimation>
		<!-- <van-popup v-model="vantPopupShow" :close-on-click-overlay="popupObj.isPopupGlobalMask" :round="popupObj.round" :position="popupObj.position" overlay-class="popClass"
			:overlay='popupObj.isOverlay' :style="{width:popupObj.width,height:popupObj.height }">
			<component :is="isPopupCom" :liveMoreArray='liveMoreArray' typeFrom="live" :roomInfo="roomInfo"
				@formChildMsg='formChildData'></component>
		</van-popup> -->
		<canvas class="canvas-box" ref="canvasBox" id="canvasBox"></canvas>
		<!-- <img  class="canvas-img" :src="canvasImg" > -->
		<!-- 举报留言弹窗 -->
		<van-popup v-model="vantPopupShow" :close-on-click-overlay="popupObj.isPopupGlobalMask" :round="popupObj.round"
				:position="popupObj.position" overlay-class="popClass" :overlay='popupObj.isOverlay'
				:style="{width:popupObj.width,height:popupObj.height }"  @click-overlay = "clickVanOverlay" >
				<component :is="isPopupCom" :meetingMsg="meetingMsg" :shoppingDataInfo='shoppingDataInfo' :reportMsgObj="reportMsgObj" typeFrom="live" :roomInfo="roomInfo"
					@formChildMsg='formChildData'>
				</component>
		</van-popup>
		<BuyRisk v-if="isBuyRisk" :buyRiskObj ="buyRiskObj" :shoppingLinkInfo="shoppingLinkInfo" @formChildMsg="formChildData"></BuyRisk>
		<!-- 第三方外链返回按钮 -->
    <BackHomePage v-if="isJump" :toJump="toJump" />
	</div>
</template>

<script>
  import Privacy from "@/pages/homeComponents/privacyText"//隐私条款
	import PreviewPage from '@/pages/liveRoomPages/components/previewPage' //预告页
	import config from "../../../config"
	import webim from "../../../util/imSdk";
	import baseIm from "../../../util/imBase";
	import fun from "../../../util/function";
	import socket from "../../../util/Socket";
	import wxApi from "../../../util/wxApi";
	import liveMixin from "@/mixins/liveMixin.js"
	import liveBackMixin from "@/mixins/liveBackMixin.js"
	import VideoCom from '../../../components/videoCom.vue';
	import MiddleLiveInfoCom from "./lsComponents/middleLiveInfoCom.vue"; //中间房间信息组件
	import MiddleNavCom from "./lsComponents/middleNavCom.vue"; //中间房间信息组件
	import LsFooter from "./lsComponents/lsFooter.vue"; //底部组件  lsInteractionRightCom
	import ProductExplain from './liveProducts.vue' //商品讲解组件
	//import LsInteractionRightCom from "./lsComponents/lsInteractionRightCom.vue"; //右边互动区域组件
	import LiveMsg from "./lsComponents/liveMsg.vue"; //留言组件
	import ShoppingBtn from "./lsComponents/shoppingBtn.vue"; //一键下单组件
	import LiveBack from "./lsComponents/liveBack.vue"; //直播间回看组件
	import LiveCurProduct from "./lsComponents/liveCurProduct.vue"; //直播间图文组件
	import LiveCurProduct2 from "./lsComponents/liveCurProduct2.vue"; //直播间图文2组件
	import LiveInvitationList from "./lsComponents/liveInvitationList.vue"; //直播间邀请榜组件
	import ZxyhLiveInvitationList from "@/components/actionSheet/zxyhLiveInvitationList.vue" //中信银行邀请榜
	import LiveLinks from "./lsComponents/liveLinks.vue"; //直播间热门产品组件
	import LiveMinePrizeList from '@/components/actionSheet/liveMinePrizeList'; //直播间我的礼物列表
	import InteractionRightCom from './interactionRightCom.vue'; //右边互动按钮组件
	import RedPacketCom from './redPacketCom.vue'; //红包组件
	import SendGift from "../../../components/actionSheet/sendGift"; //送礼打赏
	import GiftTips from "../../../components/actionSheet/giftTips.vue"; //送礼提示
	import InvitationCard from '@/pages/invitationCard/newInvitationCard.vue'; //邀请卡
	import LiveReward from './lsComponents/liveReward.vue'; //打赏组件
	import Reminder from "../../../zyzqPages/components/reminder.vue"; //温馨提示
	import LiveRemindSuccess from '@/components/liveRemind/liveRemindSuccess'; //开播提醒成功组件
	import TurntableCom from '@/components/lotteryCom/turntableCom'; //抽奖组件
	import GlobalMask from '@/components/globalMask'; //全局背景层组件
	import {
		activityArrayLoc
	} from '@/store/dataList.js'; //模拟假数据
	import FooterPop from '@/components/activeCom/footerPop'; //活动底部弹出框
	import PopUp from '@/components/popUp' //视频已下架 国盛风险提示
	import ApplyInfo from '@/components/applyInfo' //报名 中奖信息组件
	import OrderList from '@/components/actionSheet/orderList.vue'; //商品列表
	import ReportPop from '@/components/reportPop' //举报
	import ZanAnimation from '../../../components/zanAnimation.vue'
    import MarqueeBar from '@/components/marqueeBar';//跑马灯
	import { shoppingInfo } from '@/util/api.js'
	import BackHomePage from '@/components/backHomePage' //三方外链返回首页按钮
	import meetingSummaryCom from '@/pages/liveRoomPages/components/meetingSummaryCom'//会议纪要弹出框
	import meetingMaterialCom from '@/pages/liveRoomPages/components/meetingMaterialCom'//会议材料弹出框
	import cleckMaterialCom from '@/pages/liveRoomPages/components/cleckMaterialCom'//查看会议材料弹出框
	import downloadMaterialCom from '@/pages/liveRoomPages/components/downloadMaterialCom'//下载会议材料弹出框
	import dayjs from 'dayjs';
	function trim(s) { //前后空格用空字符串替代
		return s.replace(/(^\s*)|(\s*$)/g, "");
	}
	export default {
		props: {
			roomInfo: Object
		},
		mixins: [baseIm, socket, wxApi, liveMixin,liveBackMixin],
		components: {
			VideoCom, //视频组件
			MiddleLiveInfoCom, //直播间中间显示区域
			MiddleNavCom, //nav 组件
			LsFooter, //底部组件
			InteractionRightCom, //右边互动区域组件
			//LsInteractionRightCom, //右边互动区域组件
			LiveMsg, //留言组件
			LiveBack, //直播间回看组件
			ShoppingBtn, //一键下单组件
			LiveCurProduct, //直播间图文组件
			LiveCurProduct2, //直播间图文组件
			LiveInvitationList, //直播间邀请榜组件
			ZxyhLiveInvitationList, //中信银行邀请卡组件
			LiveLinks, //直播间热门产品组件
			RedPacketCom, //红包组件
			SendGift, //送礼打赏
			GiftTips, //送礼提示
			InvitationCard, //邀请卡组件
			LiveReward, //打赏组件
			Reminder,
			LiveRemindSuccess, //开播提醒成功组件
			ProductExplain, // 商品讲解
			TurntableCom, //抽奖组件
			GlobalMask, //全局背景层组件
			LiveMinePrizeList, //直播间我的礼物列表
			FooterPop, //底部弹出层组件
			PopUp, //直播已下架（SaaS） 国盛证券风险提示
			ApplyInfo, //中奖信息组件
			OrderList, //商品列表
			ReportPop, //举报
			ZanAnimation, //赞 上方效果
			PreviewPage, //预告页
      Privacy, //隐私政策
      MarqueeBar,//跑马灯
			BackHomePage,//三方外链返回首页按钮
			meetingSummaryCom,//会议纪要弹出框
			meetingMaterialCom,//会议材料弹出框
			cleckMaterialCom,//查看会议材料弹出框
			downloadMaterialCom,//下载会议材料弹出框
		},
		data() {
			return {
                isPrivacy:false, //隐私政策
				roomId: this.$route.params.roomid, //房间id
				videoCoverBox: true, //视频覆盖层
				//tab信息
				navTabArray: this.roomInfo.tables, //nav 数据this.roomInfo.tables
				isContentCom: null, //留言区域组件
				noNavLength: '', //没有nav配置
				isNoNav: null, //有没有nav
				isRedPacketCom: false, //红包组件显示
				renderCom: 0, //强制刷新红包组件
				lotteryNum: 0, //强制刷新抽奖组件
				redPacketData: {}, //单个红包信息
				redPacketMsgData: {}, //留言里面的单个红包信息
				redListParent: [], //红包历史数据数组
				enterType: '', //红包进入方式
				liveRoomInterval: '', //房间定时器
				isRewardBtn: false, //打赏按钮
				//im相关
				un: '',
				nickname: "", // 昵称
				wxpic: "",
				selSess: null,
				selType: webim.SESSION_TYPE.GROUP,
				imMsgItem: {}, //要传到子组件里面的 im消息
				imOfficalMsgItem: {}, //传到子组件 im小助手消息
				imReplyMsgItem: {}, //传到子组件 im小助手回复消息
				isInvitationCard: false,
				roomNum: '', //房间人数
				socketHdCount: '', //socket hdCount数量
				socketLoveMsg: null, //socket 点赞消息
				socketGiftMsg: null, //socket 送礼消息
				roomRealNum: ' ', //真是人数
				isCkFull: false,
				isMarquee: false, //跑马灯
				marqueeArray: [], //跑马灯数组
				marqueeTipUnArray: [], //进入房间数组
				marqueeTipUnShow: false, // 动画的执行与不执行
				marqueeTipClass: '', //进入房间提示class
				isEnterMessage: false, //进入房间提示开启  true 打开 false 关闭
				computeLeft: '', //计算进入房间提示滚动距离
				isPlayBtn: false, //播放按钮显示不显示
				isShoppingBtn: false, //一键下单按钮
				shoppingTitle: '', //一键下单标题
				msg: 'baberrage',
				barrageIsShow: '', //弹幕内容
				currentId: 0,
				barrageLoop: false,
				barrageList: [], //弹幕数据
				getPlatform: fun.getPlatform(), //app wx
				liveType: '', //房间状态 roomStatus  0  1  2  对应 1  2  16
				comeTip: '来到直播间', //进入房间提示语
				shoppingIcon: '', //一键下单图标
				isLiveRemindSuccess: false, //开播提醒成功组件显示
				liveRemind: '', //直播提醒
				isProductShow: false, // 商品讲解组件默认显示
				productObj: {}, //商品讲解对象
				isTurntable: false, //抽奖组件
				startLotteryObj: '', //开始抽奖信息
				isZyzqApp: window.isZyzqApp,
				winInfoData: {}, //直播间单个奖品
				activityArray: [], //活动数组
				activeDataArray: [], //单个活动数组
				activeTitle: '', //活动标题
				userRl: null, //国盛证券是否登录资金账户
				isPublic: false, //国盛证券分享后 链接是否公开不限制
				isAuthorizePass: false, //继续观看 继续预约
				isAudit: false, //审核
				timerNum: 0,
				timerNumSwitch: true,
				shoppingDataInfo: {}, //一键下单数据
				headerObj: {
					'isShowBack': true,
					'isShowClose': false,
					'isShowMine': false,
					'fromType': 'mine',
					'titleText': '蜻蜓Live',
					'color': 'white'
				},
				isPreviewPage: false,
				banner: [],
				txBase: '', //用户头像
				postImg: '', //封面图
				liveTime: '', //预告时间
				clockImg: require('@/assets/images/invite/clock.png'), //时间icon
				mengCengApp: require("@/assets/images/inviteApp/mengceng.png"), //蒙层
				mengCeng: require("@/assets/images/invite/mengCeng.png"), //蒙层
				wBg: require('@/assets/images/invite/s_white.png'), //白底
				reduceVal: 1200,
				canvasImg:'',
				vantPopupShow: false,
				popupObj: {
					'position': '',
					'width': '',
					'height': '',
					'isOverlay': true,
					'round':false,//圆角
					'isPopupGlobalMask':true,//蒙层是否点击消失
				},
				buyRiskObj:null,
				isBuyRisk:false,//是否打开购物车购买风险弹窗
				shoppingLinkInfo:{},//购物车当前点击商品信息
				isJump: false, // 是否为第三方外链进入
				toJump: '', //从那个机构跳转过来
				/* 播放器相关 */
				tid: '', // 清晰度 '' = 原画 saas-lhd = 高清 saas-lsd = 标清
				isRTC: sessionStorage.getItem('notRTC') ? false : false, // 低延迟标识
				meetingMsg: {},//给会议材料组件的数据
			}
		},
		computed: {
			riskTipEd() {
				return this.$store.state.setRiskTip;
			},
			isCom() { //提示框
				return this.$store.state.setTip;
			},
			sysInfo() {
				return this.$store.state.SysOrgInfo;
			},
			uinfo() {
				return this.$store.state.userInfo;
			},
			wacthIconUn() { //优化 监听 icon un
				return this.$store.state.SysOrgInfo.icon;
			},
			showSendMask() { //送礼操作面板外层透明蒙版  显示
				return this.$store.state.giftPanel.showSendMask
			},
			showGiftPanelFlag() { //送礼操作面板 显示
				return this.$store.state.giftPanel.showGiftPanelFlag
			},
			showSendGiftFlag() { //送礼提示 显示
				return this.$store.state.showSendGiftFlag
			},
			isGlobalMask() { //操作面板外层透明蒙版 显示
				return this.$store.state.globalMask.isShow
			},
			giftMessageArray() {
				return this.$store.state.giftMessageQueue
			},
			isGetNumCfg() {
				if (this.isCkFull == false && this.roomRealNum > 0 && this.roomInfo.roomInfo.maxNum != undefined && this
					.roomInfo.roomInfo.maxNum > 0) {
					this.isCkFull = true
					if (this.roomRealNum >= this.roomInfo.roomInfo.maxNum) {
						fun.toastMessage("抱歉直播间人数达到上限，请稍后再来", 1666)
						let _this = this
						setTimeout(() => {
							_this.$router.push(`/${this.$channel}/home`)
						}, 1666)
					}
					return true
				} else {
					return false
				}
			},
		},
		watch: {
			riskTipEd: { // 检查是否签约
				immediate: true,
				handler(val, oldVal) {
					if (this.$channel == 'zyzq' && !val) {
						fun.getRoomSignUp(this.roomId, 0) //签约类提示
					};
				}
			},
			uinfo(curVal, oldVal) {
				if (curVal.un != undefined && curVal.un.length > 0) {
					this.un = curVal.un;
					this.nickname = curVal.nickname;
					this.wxpic = curVal.wxpic;
					this.getImInit(); //im初始化
					this.getCardER(); //邀请里面二维码
					this.invitationCardFun(this.wxpic);
				}
			},
			wacthIconUn(newValue, oldValue) {
				this.wxRegister(this.wxRegCallback);
			},
			isGetNumCfg(v, ov) {},
		},
		created() {
			this.$bus.$on('changeTidAndRtc', ({
				tid,
				isRTC
			}) => {
				if (tid !== undefined) {
					this.tid = tid
					this.tidRadio = tid ? tid === 'saas-lhd' ? '1' : '2' : '0'
				}
				if (isRTC !== undefined) this.isRTC = isRTC
				this.getVideoSrc()
			})
			if (window.terminal.isZxjtApp) {
				this.banner = [{
						url: require('@/assets/images/inviteApp/1.png'),
						title: "蓝色简约"
					},
					{
						url: require('@/assets/images/inviteApp/2.png'),
						title: "限时抢购"
					},
					{
						url: require('@/assets/images/inviteApp/3.png'),
						title: "看直播赢好礼"
					},
					{
						url: require('@/assets/images/inviteApp/4.png'),
						title: "标准版"
					},
					{
						url: require('@/assets/images/invite/5.png'),
						title: "建投版邀请卡"
					},
				]
			} else {
				this.banner = [{
						url: require('@/assets/images/invite/1.png'),
						title: "蓝色简约"
					},
					{
						url: require('@/assets/images/invite/2.png'),
						title: "限时抢购"
					},
					{
						url: require('@/assets/images/invite/3.png'),
						title: "看直播赢好礼"
					},
					{
						url: require('@/assets/images/invite/4.png'),
						title: "标准版"
					},
					{
						url: require('@/assets/images/invite/5.png'),
						title: "建投版邀请卡"
					},
				]
			}
			let {
				roomStatus,
				status
			} = this.roomInfo.roomInfo;
			//开播提醒
			if (this.roomInfo.hasOwnProperty('isZbRemind')) {
				this.liveRemind = this.roomInfo.isZbRemind;
			}
			if (roomStatus == '0') { //预告
				this.liveType = '1'
			} else if (roomStatus == '1') { //直播
				this.liveType = '2'
			} else if (roomStatus == '2') { //关播
				this.liveType = '16'
			};
			//存直播间url
			let backVideoUrl = window.location.href
			this.$lockr.set("PlayBackVideoUrl", backVideoUrl)
			fun.dotNum('live_particulars_page'); //打点
			//初始化弹幕
			if (this.roomInfo.roomInfo.bulletScreen == '1') { //打开弹幕
				this.barrageIsShow = true;
			} else {
				this.barrageIsShow = false;
			}
			this.setIntervalLiveRoom(); //房间定时器
			this.getShoppingData(); //一键下单
			this.computeLeft = document.body.clientWidth * 215 / 375
			if (this.roomInfo.roomInfo.enterMessage) { //进入房间提示开启
				this.isEnterMessage = true
			} else {
				this.isEnterMessage = false
			}
			if (this.$store.state.userInfo.un != undefined && this.$store.state.userInfo.un.length > 0) { //im 消息初始化
				this.un = this.$store.state.userInfo.un;
				this.nickname = this.$store.state.userInfo.nickname;
				this.wxpic = this.$store.state.userInfo.wxpic;
				this.getImInit(); //im初始化
				this.getCardER(); //邀请里面二维码
				this.invitationCardFun(this.wxpic);
			}
			if (roomStatus == 0) { //预告
				this.isPreviewPage = true;
			} else if (roomStatus == 1) { //直播
				this.isPlayBtn = true
				this.getVideoSrc(); //视频流
				this.$store.dispatch('setLiveIsStart', true)
			}
			let statusArrayNum = [0, 1, 4]; //-1 提交还没审核  0  审核通过 首页展示 1 已生效 2 已删除 3 提交审核中 4 已审核 5 驳回
			if (!statusArrayNum.includes(status)) { //提示审核
				this.isAudit = true;
			}
			if (this.$store.state.SysOrgInfo.icon && this.$store.state.userInfo.un) { //机构图片和un
				this.wxRegister(this.wxRegCallback);
			}
			if (this.navTabArray.length) {
				switch (this.navTabArray[0].type) {
					case 1: //留言
						this.isContentCom = 'LiveMsg';
						break;
					case 2: //直播间回看
						this.isContentCom = 'LiveBack';
						break;
					case 3: //图文
						this.isContentCom = 'LiveCurProduct';
						break;
					case 4: //邀请卡
						this.isContentCom = 'LiveInvitationList';
						break;
					case 5: //热门产品
						this.isContentCom = 'LiveLinks';
						break;
					case 6: //图文2
						this.isContentCom = 'LiveCurProduct2';
						break;
					default:
						break;
				}
			}
			if (this.navTabArray.length == '1' || this.navTabArray.length == '0') {
				this.noNavLength = 'noNav';
				this.isNoNav = false;
			} else {
				this.isNoNav = true;
			}

			this.getRoomMember(this.roomId, this.roomInfo.roomInfo.sid, this.roomInfo.roomInfo.showStyle, (num) => {
				this.roomNum = num;
				if (this.roomInfo.roomInfo.showStyle == 0) {
					this.roomRealNum = num;
				}
			})
			if (this.roomInfo.roomInfo.maxNum && this.roomInfo.roomInfo.maxNum > 0 && this.roomInfo.roomInfo.showStyle !=
				0) {
				this.getRoomMember(this.roomId, this.roomInfo.roomInfo.sid, 0, (num) => {
					this.roomRealNum = num;
				})
			};
			//打赏逻辑
			if (this.roomInfo.marketQR) {
				if (this.roomInfo.marketQR.open == '1') { //打开
					this.isRewardBtn = true;
				}
			};
			if (this.roomInfo.roomInfo.status == '2') { //是否后台已删除直播
				this.liveOffline();
				return
			}
			//活动
			fun.getActivityData(1, this.roomId, (res) => {
				this.activityArray = res.data.data;
			});
			//浮窗direction
			let channelArr = ['zxjt'];
			if (channelArr.includes(this.$channel)) {
				let modeArr = [0, 2];
				let {
					mode
				} = this.roomInfo.roomInfo; //0 横屏   其他竖屏
				if (mode == null) {
					mode = '0'
				}
				let direction = modeArr.includes(mode) ? '0' : '1';
				this.$store.dispatch('setFloatVideoDirection', direction);
			}
			// 是否为三方外链跳转
			if(!!window.sessionStorage.getItem('isJump')){
				this.isJump = !!window.sessionStorage.getItem('isJump')
				this.toJump = window.sessionStorage.getItem('toJump')
			}
		},
		mounted() {
			this.$store.dispatch("enterRoomTime", new Date().getTime()) //进入直播间的开始计时时间


		},
		destroyed() { //组件销毁时候调用
			clearInterval(this.liveRoomInterval); //关闭跑马灯 进入房间提示
			this.quitBigGroup(this.roomId);
			this.$store.dispatch("getShopBtn", false)
			this.$store.dispatch("giftMessageQueue", []); //清空送礼列表
			this.$store.dispatch("getSocketConnected", false); //socket关闭
			this.$store.dispatch('setLiveIsStart', false)
		},
		methods: {
      passSocketMsg(msg) {
        console.log("透传socket消息-横屏", msg);
        this.$refs.childRightWrap.passSocketMsg(msg);
      },
		clickVanOverlay() {
			if (this.isPopupCom == 'SmsVer') {

			} else {
				this.vantPopupShow = false;
				setTimeout(() => {
					this.isPopupCom = null
				}, 300)
			}
		},
			roomVideoStartLive() { //socket开播
				if (!this.$store.state.liveIsStart) { //未开播
					this.$store.dispatch('setLiveIsStart', true)
					this.isPlayBtn = true;
					this.getVideoSrc(); //视频流;
					this.isPreviewPage = false;
					this.getMsmVerInit() //minxin里面方法
				}
			},
			invitationCardFun(txImg) {
				if (!this.$store.state.isYk) { //非游客
					if (txImg == null || txImg.includes('gd_mr')) { //游客容错
						this.txBase = require('@/assets/images/gd_mr.png')
					} else {
						this.getImgBase64(txImg, 'tx');
					};

					let {
						roomInfo: {
							imagUrl
						}
					} = this.roomInfo;
					//封面图 img
					this.getImgBase64(imagUrl, 'back');
				}
			},
			getActiveData() { //请求活动数据 elementType应用元素 0 首页 1直播间 2视频 3短视频  elementiId  id         targetType    0 app 1 微信
				let targetType = window.terminal.weixin ? '1' : '0'
				this.$http.get("/h5live/hzb/activity/icon?elementType=3&elementId=" + this.$route.query.id +
						"&targetType=" +
						targetType)
					.then(res => {
						if (res.data.code == "000000") {
							for (let i = 0; i < res.data.data.length; i++) {
								if (res.data.data[i].length != 0) {
									this.$set(this.isActive, i, true); //数组，需要修改数组的第几个索引，要改的数据
								}
							}
							this.activeArray = res.data.data;
						} else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
			getCardER() { //邀请里面二维码
				let ERcode = fun.getCurPageUrl("live", this.roomId)
				this.$lockr.set("ERcode", ERcode)
			},
			socketCallBack() { //分享统计
				let _this = this
				if (_this.$route.query.fromUn != undefined) {
					setTimeout(() => {
						let params = {
							'fromUn': _this.$route.query.fromUn,
							'anchor': _this.roomInfo.roomInfo.anchor,
							'roomId': _this.roomId
						};
						_this.$http.post("/h5live/shareCount", _this.$qs.stringify(params)).then(
							res => {
								if (res.data.code == "000000") {
									console.log("share invite data", res.data.data)
								} else {
									console.log("server data err")
								}
							},
							err => {
								console.log(err);
							}
						);
					}, 368)
				}
			},
			hongbaostartruan(data) { //im红包消息
				if (this.$store.state.isYk) {
					return
				}
				this.redPacketData = data;
				this.redPacketMsgData = data;
				if (!this.$store.state.isYk) {
					this.renderCom++;
					this.enterType = 'redPopup';
					this.isRedPacketCom = true;
				}
			},
			//弹幕数据
			addToList(msg) {
				let _this = this
				_this.barrageList.push({
					id: ++_this.currentId,
					msg: msg,
					time: 4,
					barrageStyle: _this.getDanMuClass()
					//type: MESSAGE_TYPE.NORMAL,
				});
			},
			//随机选取弹幕的一个class色值
			getDanMuClass() {
				let arrDanMuClass = ["danmuClassWhite", "danmuClass1", "danmuClass2"];
				let n = Math.floor(Math.random() * arrDanMuClass.length + 1) - 1;
				return arrDanMuClass[n];
			},
			//直播间商品列表和标题 一键下单
			async	getShoppingData(comeFrom) {
				try {
					// let plat = this.$store.state.axiosPlat;
					// if(!plat){
					// 	await fun.initAxiosPlatform()
					// }
					const msgData = await shoppingInfo(this.roomId,'0');
					const { code } = msgData.data;
					if(code === '000000'){
						const {data,data:{goods:{goodsList}}} = msgData.data;
						this.shoppingDataInfo = data;
						if(goodsList.length){
							for (let i = 0; i < goodsList.length; i++) {
								if (goodsList[i].enIntro == "1") {
									this.appendExpGoods(goodsList[i])
								}
								this.isShoppingBtn = true;
							}
							if(comeFrom === 'rightBtnFrom'){
								this.popupObj = {
									'position': 'bottom',
									'width': this.$store.state.isMobile ? '100%' : '400px',
									'height': 'auto',
									'isOverlay': true,
									'round': true,
									'isPopupGlobalMask': true,
								},
								this.isPopupCom = 'OrderList';
								this.vantPopupShow = true;
							}
						}
					}

				} catch (error) {
					console.log(error);
				}
				return
				this.$http.get('/h5live/getRoomGoodsAndTitle?mixId=' + this.roomId + '&type=0').then((
					res) => { //mixId 房间id或回看id   type 0-直播间,1-回看
					if (res.data.code == '000000') {
						if (res.data.data.goods.length) {
							this.shoppingIcon = res.data.data.icon; //一键下单图标
							if (window.terminal.weixin) { //微信
								let num = 0;
								let shoppingArray = [];
								for (let i = 0; i < res.data.data.goods.length; i++) {
									if (res.data.data.goods[i].goodsTarget == "1") { // 0 app  1 微信
										num++;
										shoppingArray.push(res.data.data.goods[i])
									}
									if (res.data.data.goods[i].isDefault == "1") {
										this.appendExpGoods(res.data.data.goods[i])
									}
								}
								if (num) {
									this.isShoppingBtn = true;
									this.$store.dispatch("getShopBtn", true)
									this.shoppingTitle = res.data.data.title
									this.shoppingDataInfo = {
										'num': num,
										'shoppingArray': shoppingArray
									}
								}
							} else { //app
								let num = 0;
								let shoppingArray = [];
								for (let i = 0; i < res.data.data.goods.length; i++) {
									if (res.data.data.goods[i].goodsTarget == "0") { // 0 app  1 微信
										num++;
										shoppingArray.push(res.data.data.goods[i])
									}
									if (res.data.data.goods[i].isDefault == "1") {
										this.appendExpGoods(res.data.data.goods[i])

									}
								}
								if (num) {
									this.isShoppingBtn = true;
									this.$store.dispatch("getShopBtn", true)
									this.shoppingTitle = res.data.data.title
									this.shoppingDataInfo = {
										'num': num,
										'shoppingArray': shoppingArray
									}
								}
							}
						}
					}
				}, (err) => {

				})
			},
			//进入房间方法
			TipUnBeforeEnter(el) { //进入之前
				el.style.opacity = 1;
				this.marqueeTipClass = this.getMarqueeTipUnClass()
			},
			TipUnEnter(el, done) { //进入
				let _this = this
				Velocity(
					el, {
						translateX: _this.computeLeft,
					}, {
						duration: 1000,
						easing: "ease-in-out",
						complete: done
					}
				);
			},
			TipUnAfterEnter(el, done) { //进入之后
				Velocity(
					el, {
						opacity: 1
					}, {
						duration: 1000,
						complete: done
					}
				);
				Velocity(
					el, {
						opacity: 0,
					}, {
						duration: 250,
						complete: done
					}
				);
				Velocity(
					el, {
						translateX: -200,
					}, {
						duration: 0,
						complete: done
					}
				);
				setTimeout(() => {
					this.marqueeTipUnArray = this.marqueeTipUnArray.slice(1);
					this.marqueeTipUnShow = false;
				}, 1410)
			},
			TipUnBeforeLeave(el, done) { //离开之前
				Velocity(
					el, {
						translateX: -200,
						// this.note1.left
					}, {
						duration: 1000,
						complete: done
					}
				);
			},
			TipUnLeave(el, done) { //离开
			},
			//随机选取弹幕的一个class色值
			getMarqueeTipUnClass() {
				let marqueeTipUnClass = ["marquee-tip-blue", "marquee-tip-orange", "marquee-tip-orange1"];
				let n = Math.floor(Math.random() * marqueeTipUnClass.length + 1) - 1;
				return marqueeTipUnClass[n];
			},
			// 跑马灯 和进入房间提示
			setIntervalLiveRoom() {
				this.liveRoomInterval = setInterval(this.setInterFun, 3000);
			},
			setInterFun: function() {
				if (this.marqueeArray.length > 0 && this.isMarquee == false) { //跑马灯打开
					this.isMarquee = true;
          this.noticeBbarClass = 'animate__bounceInRight'
				};
				if (this.marqueeTipUnArray.length > 0) { //进入房间提示
					this.marqueeTipUnShow = true
					if (this.marqueeTipUnArray.length > 50) {
						let randomNum = this.random(3, 10)
						this.comeTip = `等${randomNum}人 来到直播间`
						this.marqueeTipUnArray = this.marqueeTipUnArray.slice(randomNum)
					}
				}
				if (this.giftMessageArray.length > 0 && !this.showSendGiftFlag) { //有送礼提示，且礼物画面不在播放中
					this.$store.dispatch("showSendGiftFlag", true)
				}
			},
			// 随机整数
			random(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			//自定义消息跑马灯
			pmdData(data) {
				let _this = this;
				//data = {"type":"pmd","content":"跑马灯内容","number":"2"}
				for (let i = 0; i < data.number; i++) {
					this.marqueeArray.push(data.content)
				}
			},
			appendGiftMsg(giftObj) { // socket  送礼消息
				this.socketGiftMsg = giftObj;
			},
			appendLoveMsg(loveObj) { //socket 点赞消息
				this.socketLoveMsg = loveObj;
			},
			// socket 获取商品讲解消息
			appendExpGoods(productObj) {
				//1 app 2 wx 3 mini  goodsTarget
				const obj = {
					'app':1,
					'wx':2,
					'mini':3
				}
				if (JSON.stringify(productObj) !== {}) {
					const plat = this.$store.state.axiosPlat ;
					if(obj[plat] == productObj.goodsTarget ){
						if (productObj.enIntro == '1') {//讲解中
							this.isProductShow = true
							this.productObj = productObj
						} else {
							this.isProductShow = false
							this.productObj = {}
						}
					}
				}
			},
			updateHdCount(hdNum) { //socket 留言数
				if (hdNum) {
					if (hdNum > this.roomInfo.hdCount) {
						this.socketHdCount = hdNum;
					}
				}
			},
			updateMember(num) { //socket人数
				if (num) {
					if (!(this.roomInfo.roomInfo.showStyle != 0 && this.roomNum && this.roomNum > num)) {
						this.roomNum = num;
					}
				}
			},
			getRoomMember(roomId, sid, showStyle, cb) {
				let _this = this
				this.$http.get("/h5live/getRoomMember?roomId=" + roomId + "&sid=" + sid + "&showStyle=" + showStyle).then(
					res => {
						if (res.data.code == "000000") {
							cb(res.data.data)
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			// 送礼 提示 动画
			TipUnBeforeEnters(el) { //进入之前
				el.style.opacity = 1;
			},
			TipUnEnters(el, done) { //进入
				let _this = this
				Velocity(
					el, {
						translateX: document.body.clientWidth * 277.5 / 375,
					}, {
						duration: 0,
						easing: "ease-in-out",
						complete: done
					}
				);
			},
			TipUnAfterEnters(el, done) { //进入之后
				Velocity(
					el, {
						opacity: 1,
					}, {
						duration: 3000,
					}
				);
				setTimeout(() => {
					let giftInfo = this.$store.state.giftMessageQueue.slice(1);
					this.$store.dispatch("giftMessageQueue", giftInfo)
					this.$store.dispatch("showSendGiftFlag", false)
				}, 3000);
			},
			TipUnBeforeLeaves(el, done) { //离开之前
				el.style.display = 'none'; // 隐藏后再进行移动，否则会出现弹回效果
				Velocity(
					el, {
						translateX: -document.body.clientWidth * 317.5 / 375,
					}, {
						duration: 0,
						complete: done
					}
				);
			},
			TipUnLeaves(el, done) { //离开
			},
			hideGiftPanelHandle() {
				// 关闭送礼面板，数量归一
				this.$store.dispatch("showGiftPanelFlag", false)
				this.$store.dispatch("showSendMask", false)
				this.$store.dispatch("giftAmount", 1)
			},
			sheetBeforeEnter(el, done) { //底部面板 弹出之前
				Velocity(
					el, {
						translateY: '100%',
					}, {
						duration: 0,
						easing: "ease-out",
						complete: done
					}
				)
			},
			sheetEnter(el, done) { //底部面板 弹出时
				Velocity(
					el, {
						translateY: '0%'
					}, {
						duration: 500,
						easing: "ease-out",
						complete: done
					}
				)
			},
			sheetAfterEnter(el, done) { //弹出之后
				// Velocity(
				// 	el, {
				// 		translateY: '0%'
				// 	}, {
				// 		duration: 300,
				// 		complete: done
				// 	}
				// )
			},
			sheetBeforeLeave(el, done) { //弹入之前
				Velocity(
					el, {
						translateY: '100%'
					}, {
						duration: 800,
						complete: done
					}
				)
			},
			sheetLeave(el, done) {},
			wxRegCallback() { //分享
				const {shareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享
				const {name,icon} = this.$store.state.SysOrgInfo || {};
				const {roomInfo:{shareTitel:roomShareTitel,shareSubtitle:roomShareSubtitl,shareImgurl:roomShareImgurl,intro,title,sid,anchor}} = this.roomInfo;
				let opstion = {
					link: fun.getCurPageUrl('live', this.roomId),
					//直播间分享标题>直播主题>机构默认分享主题>默认值
					title: roomShareTitel || title || shareTitle || '【' + name + '】一起来看直播吧！' , // 分享标题
					desc: roomShareSubtitl || intro|| shareDesc || "精彩直播，尽在" + name + "手机直播！", //分享描述
					imgUrl: roomShareImgurl || shareIcon || icon, //分享的图片
					success: function() {
						let params = {
							'roomId': this.roomId,
							'sceneId': sid,
							'anchor': anchor,
							'url': window.location.origin + '/#' + this.$route.path
						};
						this.$http.post('/h5live/shareStatic', this.$qs.stringify(params)).then(
							res => {},
							err => {
								console.log(err)
							}
						)
					},
					error: function(e) {

					}
				};
				this.ShareTimeline(opstion);
			},

			quitBigGroup(avChatRoomId) {
				let options = {
					'GroupId': avChatRoomId //群id
				};
				webim.quitBigGroup(
					options,
					function(resp) {
						webim.logout()
						console.log("退群成功")
					},
					function(err) {
						console.log("退群fail", err.ErrorInfo);
					}
				);
			},
			//进入房间信息提示回调
			enterRoomPersonTip(nick) { //参数昵称
				if (this.isEnterMessage) { //true 是进入房间开启提示  false是不提示
					if (this.$store.state.userInfo.nickname != nick) { //当前账号不是自己 push到数组里面
						this.marqueeTipUnArray.push(nick);
					}
				}
			},
			//小助手发言回复
			replyMessage(data) {
				this.imReplyMsgItem = data
			},
			// 小助手发言
			heaperMessage(data) {
				this.imOfficalMsgItem = data
			},
			//IM留言
			getMessage(msg) {
				let subType = msg.getSubType();
				let text = "";
				let HDhtml = "";
				let typeNum = ''
				switch (subType) {
					case webim.GROUP_MSG_SUB_TYPE.COMMON: // 群普通消息
						text = this.convertMsgtoHtml(msg);
						//						if(text===this.$channel+'ANSWER'){//typeNum == 3  答题
						//							typeNum = 3;
						//							HDhtml =' <div class="HDClass1">提交了答题~ <div class="HDimg classDT"></div></div>'
						//						}
						//						if(text===this.$channel+'QUESTION'){//typeNum == 4  问卷
						//							typeNum = 4;
						//							HDhtml =' <div class="HDClass1">提交了问卷~ <div class="HDimg classWJ"></div></div>'
						//						}
						//						if(text===this.$channel+'VOTE'){//typeNum == 5 投票
						//							typeNum = 5;
						//							HDhtml =' <div class="HDClass1">已投票成功~ <div class="HDimg classTP"></div></div>'
						//						}

						//						if(trim(text).length == '11') {
						//							if((/^1[3456789]\d{9}$/.test(trim(text)))) { //是手机号码
						//								text = trim(text).substring(0, 3) + "****" + trim(text).substring(7, 11);
						//							}
						//						}

						if (text === 'gift') { //typeNum === 6 礼物消息
							typeNum = 6;
						}
						break;
					case webim.GROUP_MSG_SUB_TYPE.REDPACKET: // 群红包消息
						text = "[群红包消息]" + this.convertMsgtoHtml(msg);
						break;
					case webim.GROUP_MSG_SUB_TYPE.LOVEMSG: // 群点赞消息
						// 业务自己可以增加逻辑，比如展示点赞动画效果
						//text = '[群点赞消息]' + this.convertMsgtoHtml(msg)
						// this.isShow();
						// 展示点赞动画
						// showLoveMsgAnimation();
						break;
					case webim.GROUP_MSG_SUB_TYPE.TIP: // 群提示消息
						text = ''
						this.convertMsgtoHtml(msg)
						break;
					default:
						text = msg.tipText;
						break;
				}
				if (text != "") {
					this.imMsgItem = {
						"addTime": this.livetime(fun.getTime()),
						"anchor": this.roomInfo.roomInfo.anchor,
						"avator": msg.fromAccountHeadurl != undefined ? msg.fromAccountHeadurl.replace("http://",
							"//") : imgTx,
						"channel": this.roomInfo.roomInfo.channel,
						"id": null,
						"message": text,
						"nickName": msg.getFromAccountNick(),
						"roomId": this.roomId,
						"sceneId": this.roomInfo.roomInfo.sid,
						"type": 0,
						"un": msg.fromAccount,
						"vType": null
					}
					if (text.length < 30 && !this.videoCoverBox) { //限制弹幕字符串 并且背景图片是不显示的
						let dmText = fun.searchIphoneNum(text)
						this.addToList(dmText);
					}
				}
			},
			getImInit() {
				let _this = this
				_this.$http.get("/h5live/getUserSix").then(
					res => {
						if (res.data.code == "000000") {
							_this.iniIm(
								_this.roomInfo.sdkId,
								_this.roomInfo.acType,
								_this.roomId,
								_this.$store.state.userInfo.un,
								_this.$store.state.userInfo.nickname,
								_this.$store.state.userInfo.wxpic,
								res.data.data,
								() => {
									_this.initWebSocket('/liveSocket/liveRoom?token=' + _this.$token + '&plat=' +
										fun.getPlatform() +
										'&roomId=' + _this.roomId + '&channel=' + _this.$channel + '&source=' +
										_this.$source);
								}
							);
						}
					},
					err => {}
				);
			},
			playBtn() { //播放按钮
				this.playBegin();
			},
			playBegin() { // 开始播放
				this.$refs.videoCom.playStart()
				this.videoCoverBox = false;
				this.videoPlayFlag = true;
				if (this.$store.state.dmShow == '1') {
					this.barrageIsShow = true; //打开弹幕
				};
			},
			getVideoSrc() { //视频流
				// tid = '' 原画 saas-lhd 高清 saas-lsd 标清
				// isRTC = true 开启 false 关闭
				const {
					roomId,
					tid,
					isRTC
				} = this
				this.$http.get(`/h5live/v1/play-stream-url?roomId=${roomId}&tid=${tid}&isRtc=${isRTC}`).then(
					res => {
						if (res.data.code = "000000") {
							let videoSrc = res.data.data;
							this.$store.dispatch("videoSrc", videoSrc);
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			getLotterySocketMsg(msg) { //抽奖socket消息
				this.startLotteryObj = {
					"activityId": msg.activityId,
					"roomId": this.roomId,
					"finish": null,
					"drawRange": null
				};
				this.lotteryNum++;
				this.isTurntable = true;
			},
			getLotteryById() {
				this.$http.get("/lotto/getCurrActIdByRoomId?roomId=" + this.roomId).then(res => {
						if (res.data.code == "000000") {
							if (res.data.data.finish == '1') { //1 未开始 7 正在进行 10 已经结束
								fun.toastMessage('抽奖还未开始，请耐心等待~');
							} else if (res.data.data.finish == '10') {
								fun.toastMessage('抽奖已结束~');
							} else {
								this.startLotteryObj = res.data.data;
								this.isTurntable = true;
							}
						} else {
							console.log('获取抽奖活动id报错')
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			getLivePrizeList() {
				this.$http.get("/lotto/userLottoTickets?page=1&pageSize=20&roomId=" + this.roomId).then(
					res => {
						if (res.data.code == "000000") {
							this.liveWinArray = res.data.data;
							this.$store.dispatch("globalMask", {
								isShow: true,
								bgColor: ''
							});
							this.showActionSheet = 'LiveMinePrizeList';
						} else {
							console.log('我的直播间奖品列表返回error', res.data)
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			// 本地将url转成base64格式
			getImgBase64(url, source) {
				window.fun.getBase64(url, source,(res) =>{
					if (source === "back") {
						this.postImg = res; // 将结果赋值给需要用的变量属性
					}  else {
						this.txBase = res;
					}
				})
			},
			getInviteBgList() {
				this.$http.get('/h5live/getShardingImg?roomId=' + this.roomId).then((res) => {
					let {
						code,
						data
					} = res.data
					if (code == '000000') {
						if(data.length && data.length == '1'){
							let canvasBox = document.getElementById('canvasBox')
							let canvas = document.createElement('canvas')
							   canvas.width = 646;
							   canvas.height = 992;
							   canvasBox.appendChild(canvas);
							   this.drawImg(data[0].title,data)
							   canvas.style.display = 'none';
						}else{
						   console.log('app邀请卡接口返回错误')
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			//app 邀请卡//根据title 画图
			drawImg(title,dataArray) {
				let erCode = this.$lockr.get("ERcode")
				this.imgBase64ERcode = jrQrcode.getQrBase64(erCode, {
					correctLevel: QRErrorCorrectLevel.L,
				}); //base64格式二维码
				return new Promise((resolve, reject) => {
					switch (title) {
						case '蓝色简约': //绘制第一张
							let c = document.getElementById("canvasBox");
							let ctx = c.getContext("2d");
							const bg = new Image();
							bg.src = this.banner[0].url;
							bg.onload = () => {
								c.width = 646*2;
								c.height = 992*2;
								ctx.drawImage(bg, 0, 0, 646*2, 992*2);
								const TXImg = new Image();
								TXImg.src = this.txBase;
								TXImg.onload = () => {
									fun.circleImg(ctx, TXImg, 270*2, 134*2, 106);
									// ctx.drawImage(TXImg, c.width/2 - 51, 173, 104, 104); //起始   +大小
									ctx.fillStyle = "#FFFFFF"; //昵称
									ctx.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
									ctx.textAlign = "center";
									ctx.fillText(this.nickname, 323*2,290*2);
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										ctx.drawImage(SCImg, 75*2, 367*2, 496*2, 280*2); //起始   +大小
												//绘制二维码
												const ERImg = new Image();
												ERImg.src = this.imgBase64ERcode;
												ERImg.onload = () => {
													ctx.drawImage(ERImg, 397*2, 696*2, 172*2,172*2);
													fun.dealImage(c.toDataURL("image/png"),
														this.reduceVal, (res) => {
															//this.canvasImg = res
															this.postAppShare(res);
															c.style.display = 'none';
														})
												}
									}
								}
							}
							break;
						case '限时抢购': //绘制第二张
							let c1 = document.getElementById("canvasBox");
							let ctx1 = c1.getContext("2d");
							const bg1 = new Image();
							bg1.src = this.banner[1].url;
							bg1.onload = () => {
								c1.width = 646*2;
								c1.height = 996*2;
								ctx1.drawImage(bg1, 0, 0, 646*2, 996*2);
								const TXImg = new Image();
								TXImg.src = this.txBase;
								TXImg.onload = () => {
									fun.circleImg(ctx1, TXImg, 273*2, 197*2, 99);
									// ctx1.drawImage(TXImg, c1.width/2 - 51, 230, 104, 104); //起始   +大小
									ctx1.fillStyle = "#FFFFFF"; //昵称
									ctx1.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
									ctx1.textAlign = "center";
									ctx1.fillText(this.nickname, 323*2,338*2);
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										ctx1.drawImage(SCImg, 75*2, 425*2, 496*2, 280*2); //起始   +大小
												//绘制二维码
												const ERImg = new Image();
												ERImg.src = this.imgBase64ERcode;
												ERImg.onload = () => {
													ctx1.drawImage(ERImg,  397*2, 752*2, 172*2,172*2);
													fun.dealImage(c1.toDataURL(
															"image/png"), this
														.reduceVal, (
															res) => {
															//this.canvasImg = res
															this.postAppShare(res);
															c1.style.display = 'none'
														})
												}
									}
								}
							}
							break;
						case '看直播赢好礼': // 绘制第三张
							let c2 = document.getElementById("canvasBox");
							let ctx2 = c2.getContext("2d");
							const bg2 = new Image();
							bg2.src = this.banner[2].url;
							bg2.onload = () => {
								c2.width = 646*2;
								c2.height = 996*2;
								ctx2.drawImage(bg2, 0, 0, 646*2, 996*2);
								const TXImg = new Image();
								TXImg.src = this.txBase;
								TXImg.onload = () => {
									fun.circleImg(ctx2, TXImg, 82*2, 228*2, 99);
									// ctx2.drawImage(TXImg, 74, 324, 82, 82); //起始   +大小
									ctx2.fillStyle = "#FFFFFF"; //昵称
									ctx2.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
									ctx2.textAlign = "left";
									ctx2.fillText(this.nickname, 213*2, 260*2);
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										ctx2.drawImage(SCImg, 75*2, 367*2, 496*2, 280*2); //起始   +大小
												//绘制二维码
												const ERImg = new Image();
												ERImg.src = this.imgBase64ERcode;
												ERImg.onload = () => {
													ctx2.drawImage(ERImg, 397*2, 695*2, 172*2,172*2);
													fun.dealImage(c2.toDataURL(
															"image/png"), this
														.reduceVal, (
															res) => {
														   //this.canvasImg = res
															this.postAppShare(res);
															c2.style.display = 'none';
														})

												}
									}
								}

							}
							break;
						case '标准版': // 绘制第四张
							let c3 = document.getElementById("canvasBox");
							let ctx3 = c3.getContext("2d");
							const bg3 = new Image();
							bg3.src = this.banner[3].url;
							bg3.onload = () => {
								c3.width = 646*2;
								c3.height = 996*2;
								ctx3.drawImage(bg3, 0, 0, 646*2, 996*2);
								const TXImg = new Image();
								TXImg.src = this.txBase;
								TXImg.onload = () => {
									fun.circleImg(ctx3, TXImg, 58*2, 193*2, 116);
									// ctx3.drawImage(TXImg, 30, 134, 116, 116); //起始   +大小
									ctx3.fillStyle = "#000000"; //昵称
									ctx3.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
									ctx3.textAlign = "left";
									ctx3.fillText(this.nickname, 207*2, 233*2);
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										ctx3.drawImage(SCImg, 55*2, 352*2, 539*2, 305*2); //起始   +大小
											//绘制二维码
											const ERImg = new Image();
											ERImg.src = this.imgBase64ERcode;
											ERImg.onload = () => {
												ctx3.drawImage(ERImg, 422*2, 723*2, 172*2,172*2);
												fun.dealImage(c3.toDataURL("image/png"), this
													.reduceVal, (res) => {
														//this.canvasImg = res
														this.postAppShare(res);
														c3.style.display = 'none'
													})

											}
									}
								}
							}
							break;
							case '建投版邀请卡': // 绘制第五张`
						let c31 = document.getElementById("canvasBox");
							let ctx31 = c31.getContext("2d");
							const bg31 = new Image();
							bg31.src = this.banner[4].url;
							bg31.onload = () => {
								c31.width = 646*2;
								c31.height = 992*2;
								ctx31.drawImage(bg31, 0, 0, 646*2, 992*2);
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										const {name,icon} = this.$store.state.SysOrgInfo || {};
										const  curUrl = window.location.href;
										let shareTitleCur;
										let shareSubTitleCur;
										if(curUrl.includes('liveRoom')){//直播间
											const {shareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享
											const {intro,title,shareTitel:roomShareTitel,shareSubtitle:roomShareSubtitl,shareImgurl:roomShareImgurl} = this.roomInfo.roomInfo;
											shareTitleCur =  roomShareTitel || title || shareTitle ||` 【 ${name} 】一起来看直播吧！`  // 分享标题
											shareSubTitleCur =  roomShareSubtitl||  shareDesc ||  `精彩直播,尽在 ${name}手机直播！`  //分享描述
										}else{//回看
											const { shareTitle: orgShareTitle, shareDesc, shareIcon } = this.$store.state.orgShareObj || {};//机构分享
											const  { shareTitle, shareSubtitle, shareImgurl, subTitle, title }  = this.videoInfo.videoInfo;
											shareTitleCur = shareTitle || title || orgShareTitle || `【 ${name } 】精彩视频`; //分享标题
											shareSubTitleCur = shareSubtitle ||  shareDesc || `精彩视频,尽在${name}手机直播！`; //分享描述
										}
										fun.drawRoundRectTopRightLeft(ctx31,20*2,0,0,646*2, 365*2,SCImg)
											//绘制title
											ctx31.fillStyle = "#000000";
											ctx31.font = "80px Arial";
											ctx31.fillText(shareTitleCur.length > 14 ? shareTitleCur.slice(0,14)+'...' : shareTitleCur, 30*2, 435*2);
											//绘制副标题
											ctx31.fillStyle = "#222630";
											ctx31.font = "52px Arial";
											//ctx31.fillText(shareSubTitleCur.length > 20 ? shareSubTitleCur.slice(0,18) +'...' : shareSubTitleCur, 30*2, 500*2);
											fun.textPrewrap(ctx31,shareSubTitleCur,30*2, 500*2,40*2,550*2,2);
											if(curUrl.includes('liveRoom')){
												//绘制时间
												ctx31.fillStyle = "#ff5a00";
												ctx31.font = "80px Arial";
											    const time = dayjs(this.roomInfo.roomInfo.beginTime).format("MM月DD日 HH:mm");
												ctx31.fillText(time, 30*2, 675*2);
												//绘制开播时间
												ctx31.fillStyle = "#ff5a00";
												ctx31.font = "48px Arial";
												ctx31.fillText('开播时间', 42*2, 598*2);
												//绘制圆角矩形
												ctx31.lineWidth = 2;//边框为14px
												ctx31.strokeStyle = '#ff5a00';
												ctx31.beginPath();
												ctx31.roundRect(30*2, 570*2, 120*2, 40*2, 20);//x,y width height  rad
												ctx31.stroke();
											}
											//绘制二维码
											const ERImg = new Image();
											ERImg.src = this.imgBase64ERcode;
											ERImg.onload = () => {
												ctx31.drawImage(ERImg, 478*2, 816*2, 300, 300);
												fun.dealImage(c31.toDataURL("image/png"), this
													.reduceVal, (res) => {
														this.canvasImg = res
														//console.log(res);
														this.postAppShare(res);
														c31.style.display = 'none'
													})

											}
									}
							}
							break;
							default: //自定义
						  let  c4 = document.getElementById("canvasBox");
						  c4.width = 646*2;
						  c4.height = 996*2;
						  let ctx4 = c4.getContext("2d");
						  let  bg4 = new Image();
						  fun.getBase64(dataArray[0].imgUrl, '', function(res) {
						  	bg4.src = res
						  });
						   bg4.onload = ()=>{
							 ctx4.drawImage(bg4, 0, 0, 646*2, 796*2);
							  const mengCeng = new Image();
							  mengCeng.src = this.mengCengApp;
							  mengCeng.onload = ()=>{
								  ctx4.drawImage(mengCeng, 0, 463*2, 646*2, 529*2); //起始   +大小
								  const TXImg1 = new Image();
								  TXImg1.src = this.txBase;
								  TXImg1.onload = () => {
								  	fun.circleImg(ctx4, TXImg1, 28*2, 828*2, 100);
								  	ctx4.fillStyle = "#000000"; //昵称
								  	ctx4.font ="normal small-caps 500 60px Microsoft Yahei In-Bold Font";
								  	ctx4.fillText(this.nickname, 148*2, 858*2);
								  		const ERImg = new Image();
								  		ERImg.src = this.imgBase64ERcode;
								  		ERImg.onload = () => {
								  			ctx4.drawImage(ERImg, 474*2, 807*2, 145*2,145*2);
								  			fun.dealImage(c4.toDataURL("image/png"), this.reduceVal, (res) => {
								  					//this.canvasImg = res;
													this.postAppShare(res);
													c4.style.display = 'none'
								  				})
								  		}
								  }
							  }
						   }
							break;
					}
				})
			},
			postAppShare(base64Pic) {
				base64Pic = base64Pic.slice(23); //删除data:image/jpeg;base64,
				if (!base64Pic) return console.log('canvas 生成base64为空');
				let shareUrl = fun.getCurPageUrl('live',this.roomId);
				const {name} = this.$store.state.SysOrgInfo || {};
				const {shareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享
				let {roomInfo: {shareTitel,title,shareSubtitle,intro}} = this.roomInfo;//房间分享
				//直播间分享标题>直播主题>机构默认分享主题>默认值
				let shareTitleLive = shareTitel || title || shareTitle  ||  '【' + name + '】一起来看直播吧！';
				let summary = shareSubtitle || intro ||shareDesc  || "精彩直播，尽在" + name + "手机直播！" ;
				if (window.terminal.isZxjtAndroid) {
					KDS_Native.shareLive(shareTitleLive, shareUrl, summary, base64Pic)
				} else if (window.terminal.isZxjtIos) {
					let json = {
						"title": shareTitleLive,
						"shareUrl": shareUrl,
						"summary": summary,
						"base64Pic": base64Pic
					}
					window.webkit.messageHandlers.shareLive.postMessage(json)
				}
			},
			formChildData(data) { //子组件传过来的数据
				const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
				switch (data.type) {
					case 'closeSmsVer'://关闭短信验证弹框
						this.vantPopupShow = false;
						break;
					case 'timePreviewEnd':
						this.isPlayBtn = true
						this.getVideoSrc(); //视频流
						this.isPreviewPage = false;
						break;
					case 'report': //举报
						this.$store.dispatch("globalMask", {
							isShow: true,
							bgColor: 'rgba(0,0,0,0.2)'
						});
						this.showActionSheet = 'ReportPop'
						break;
					case 'closeReportPop': //关闭举报
						this.$store.dispatch("globalMask", {
							isShow: false,
							bgColor: ''
						});
						this.showActionSheet = ''
						break;
					case 'footerVantPopClose':
						this.vantPopupShow = false;
						setTimeout(() => {
							this.isPopupCom = null
						}, 300)
						break;
					case 'clickShoppingBtn':
					     this.getShoppingData('rightBtnFrom')
						break;
					case 'openBuyRisk': //打开购物车购买风险弹窗
						this.buyRiskObj = data.data.buyRiskObj
						this.shoppingLinkInfo = data.data.shoppingLinkInfo
						this.isBuyRisk = true;
						break;
					case 'closeBuyRisk': //购物车购买风险弹窗 点击记录
						this.isBuyRisk = false;//关闭
						break;
					case 'applyInfo': //报名中奖信息
						this.$store.dispatch("globalMask", {
							isShow: true,
							bgColor: ''
						});
						this.showActionSheet = 'ApplyInfo'
						break;
					case 'closeApplyInfo': //报名中奖信息
						this.$store.dispatch("globalMask", {
							isShow: false,
							bgColor: ''
						});
						this.showActionSheet = ''
						break;
					case 'activityChildArray': //单个活动数据
						this.activeDataArray = data.data;
						this.activeTitle = data.data.name;
						this.$store.dispatch("globalMask", {
							isShow: true,
							bgColor: ''
						});
						this.showActionSheet = 'FooterPop';
						break;
					case 'closeInvitation': //关闭邀请卡组件
						this.isInvitationCard = false;
						break;
					case 'triggerPrizeInfo': //triggerPrizeInfo
						this.showActionSheet = '';
						this.$store.dispatch("globalMask", {
							isShow: false,
							bgColor: ''
						});
						this.winInfoData = data.data; //触发直播间单个奖品
						break;
					case 'closeGlobalMask': //关闭全局弹出框背景层
						this.isGlobalMask = false;
						break;
					case 'minePrizeLiveList': //我的奖品列表
						this.getLivePrizeList()
						break;
					case 'closeAllPrizeCom': //关闭抽奖组件
						this.isTurntable = false;
						break;
					case 'clickLivePrize': //点击抽奖按钮
						// 神策打点（抽奖）
						$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
							page_name: `直播${['预告', '详情'][roomStatus]}页`,
							user_nickname: this.$store.state.userInfo.nickname,
							live_room_id: roomId,
							live_room_name: title,
							live_room_status: ['预告', '直播中'][roomStatus],
							live_room_creator: anchor,
							function_name: '抽奖',
						});
						this.getLotteryById()
						break;
					case 'navType': //nav tab
						switch (data.data) {
							case 1:
								this.isContentCom = 'LiveMsg';
								break;
							case 2:
								this.isContentCom = 'LiveBack';
								break;
							case 3:
								this.isContentCom = 'LiveCurProduct';
								break;
							case 4:
								this.isContentCom = this.$channel == 'zxyh' ? 'ZxyhLiveInvitationList' :
									'LiveInvitationList';
								break;
							case 5:
								this.isContentCom = 'LiveLinks';
								break;
							case 6:
								this.isContentCom = 'LiveCurProduct2';
								break;
							default:
								break;
						}
						break;
					case 'barrageOpen': //弹幕开关
						if (data.data == '0') { //关闭弹幕
							this.barrageIsShow = false;
						} else if (data.data == '1') { //打开弹幕
							this.barrageIsShow = true;
						}
						break;
					case 'historyRedPcaketListArray': //历史红包数组
						this.enterType = 'redBtn';
						this.redListParent = data.data;
						this.isRedPacketCom = true;
						break;
					case 'closeRedPacketCom': //关闭红包组件
						this.isRedPacketCom = false;
						break;
					case 'closeAllPopup': //关闭所有弹出层
						this.showActionSheet = ''
						this.$store.dispatch("globalMask", {
							isShow: false,
							bgColor: ''
						});
						break;
					case 'sendImNotice': //要发送的im消息
						this.SendImMsg(data.data.tmpMsg)
						break;
					case 'startToLive': //开始直播
						this.videoCoverBox = true; //显示背景图片
						this.isPlayBtn = true; //显示播放按钮
						this.getVideoSrc(); //视频流
						break;
					case 'sendImGiftMsg': //送礼物im
						break;
					case 'clickMessageLiHbData': //点击列表里面的红包
						this.enterType = 'messageRedPacket';
						this.redPacketData = data.data.hbData;
						this.renderCom++;
						this.isRedPacketCom = true;
						break;
					case 'liveRemind': //开播提醒
						this.isLiveRemindSuccess = true; //成功提醒组件
						break;
					case 'footerActionSheetClose': //关闭底部弹出面板
						this.showActionSheet = ''
						this.$store.dispatch("globalMask", {
							isShow: false,
							bgColor: ''
						});
						break;
					case 'closeLiveRemindSuceesBox': //关闭开播提醒成功组件
						this.isLiveRemindSuccess = false; //成功提醒组件
						break;
          			case 'closeNoticeBbar': //关闭跑马灯
						this.noticeBbarClass = 'animate__bounceOutLeft';
            this.marqueeArray = this.marqueeArray.slice(1);
            setTimeout(()=>{
              this.isMarquee = false
            },3000)
						break;
					case 'shareLive':
					case 'interactionList': //邀请卡组件
					case 'clickPreviewInvite':
						// 神策打点（邀请）
						$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
							page_name: `直播${['预告', '详情'][roomStatus]}页`,
							user_nickname: this.$store.state.userInfo.nickname,
							live_room_id: roomId,
							live_room_name: title,
							live_room_status: ['预告', '直播中'][roomStatus],
							live_room_creator: anchor,
							function_name: '邀请',
						});
						if (this.$store.state.isYk) {
							fun.ykDisposeFun();
						} else {
							if (window.terminal.isZxjtApp) {
								this.getInviteBgList(this.roomId);
							}else if(window.terminal.isZxjtqhApp){//建投期货app
							let {shareTitel,shareSubtitle,shareImgurl} = this.roomInfo.roomInfo
							fun.zxjtqhShare('liveRoom',"22,23,24,1",shareTitel,fun.getCurPageUrl('live', this.roomId),shareSubtitle,shareImgurl)
                       } else{
								this.isInvitationCard = true;
							}
						}
						break;
					case 'reportMsgData': //举报留言
						this.reportMsgObj = data.data;
						this.popupObj = {
							'position': 'bottom',
							'width': '100vw',
							'height': 'auto',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
							},
						this.isPopupCom = 'reportMsgCom'
						this.vantPopupShow = true;
						break;
					case 'closeVantPopup': //关闭vant弹出框组件
						this.vantPopupShow = false;
						setTimeout(() => {
							this.isPopupCom = null
						}, 300)
						break;
					case 'meetingSummary'://点击会议纪要弹出窗口
						this.popupObj = {
							'width': '85%',
							'height': '70%',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
						},
						this.isPopupCom = 'meetingSummaryCom';
						this.vantPopupShow = true;
						break;
					case 'meetingMaterial'://点击会议材料弹出窗口
						this.$store.dispatch("globalMask", {
							isShow: true,
							bgColor: ''
						});
						this.showActionSheet = 'meetingMaterialCom'
						break;
					case 'cleckMaterial'://点击查看材料弹出窗口
						this.popupObj = {
							'position': 'bottom',
							'width': '100%',
							'height': 'auto',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
						},
						this.isPopupCom = 'cleckMaterialCom';
						this.vantPopupShow = true;
						this.meetingMsg = data.dataMsg
						break;
					case 'downloadMaterial'://点击下载材料弹出窗口
						this.popupObj = {
							'width': '85%',
							'height': '25%',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
						},
						this.isPopupCom = 'downloadMaterialCom';
						this.vantPopupShow = true;
						this.meetingMsg = data.dataMsg
						break;
					default:
						break;
				}
			},
			//im推送了答题等
			pushVote(obj) {
				//触发子组件的消息推送
				this.$refs.childRightWrap.pushVote(obj);
				//this.$parent.getRoomInfo();
			},
			//im推送了报名
			pushBaoMing() {
				this.$store.dispatch("globalMask", {
					isShow: true,
					bgColor: ''
				});
				this.showActionSheet = 'ApplyInfo'
				this.$refs.childRightWrap.pushBaoMing();
			},
			// 商品讲解组件是否显示
			getProduct(val) {
				this.isProductShow = val
			},
			// 停播消息  违规消息
			closeLiveMsg(data) {
				this.$refs.videoCom.$refs.videoref.pause();
				switch (data.type) {
					case "closeLiveEnd": //正常停播消息
						this.$emit("sendFather", {
							type: 'closeLiveEnd',
							data: data
						})
						break;
					case "violations": // 违规停播
						this.$emit("sendFather", {
							type: 'violations',
							data: data
						})
						break;
					default:
				}
			},

		}
	}
</script>

<style scoped="scoped">
	.landscape-live-box {
		width: 100%;
		height: 100%;
		background: white;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	    position: relative;
	}

	.cover-video-img {
		height: 424px;
		width: 100%;
		display: block;
		object-fit: cover;
	}

	.play-btn {
		width: 115px;
		height: 115px;
		background: url(../../../assets/images/play.png) no-repeat;
		background-size: 115px 115px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -57.5px;
		margin-left: -57.5px;
		z-index: 1000;
	}

	.gift-bg-mask {
		width: 100vw;
		height: 100vh;
		background: transparent;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 12;
	}

	.person-list {
		position: absolute;
		top: 140px;
		left: 30px;
		z-index: 10;
		color: red;
	}

	.marquee-box {
		height: 70px;
		position: fixed;
		top: 520px;
		/*right: 0;*/
		z-index: 1100;
		display: flex;
		/*background: rgba(255,253,238,0.9);*/
		align-items: center;
		justify-content: center;
		white-space: nowrap !important;
		padding: 0 30px;
	}

	.marquee-left {
		width: 47px;
		height: 70px;
		background: url(../../../assets/images/marquee-left.svg) no-repeat;
	}

	.marquee-content {
		background: #FFB12A;
		height: 70px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10px;
	}

	.marquee-text-box {
		background: rgba(204, 53, 56, .6);
		height: 60px;
		color: white;
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 17px;
		font-size: 28px;
		white-space: nowrap !important;
	}

	.marquee-tip {
		position: fixed;
		left: -400px;
		bottom: 175px;
		z-index: 50;
		opacity: 0.85;
		border-radius: 8px;
		color: white;
		font-size: 24px;
		padding: 10px 16px;
		text-align: center;
		font-weight: 500;

	}

	.marquee-tip-blue {
		background: rgba(54, 209, 255, 1);
	}

	.marquee-tip-orange {
		background: #ff9e63;
	}

	.marquee-tip-orange1 {
		background: #ff7162;
	}

	.marquee-tip span {
		margin-right: 10px;
	}

	.baberrage-item {
		padding: 0px 0px 0px 140px !important;
	}

	.baberrage-stage>>>.danmuClassWhite {
		color: white !important;
	}

	.baberrage-stage>>>.danmuClass1 {
		color: #f02e2e !important;
	}

	.baberrage-stage>>>.danmuClass2 {
		color: #f2b954 !important;
	}

	.baberrage-msg {
		text-shadow: 2px 2px 2px #272727;
		font-size: 30px;
		line-height: 26px !important;
		padding: 10px 0 4px 0 !important;
	}

	.baberrage-avatar {
		display: none !important;
	}

	.baberrage-stage {
		width: 750px !important;
		height: 0px !important;
		/*border: 3px  saddlebrown solid;*/
		/*background: pink;*/
		position: absolute !important;
		top: 0;
		left: 0;
		z-index: 505 !important;
		margin-top: 66px;
		overflow: visible;
	}



	.header-conatiner /deep/ .header-box {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.2) 100%);
	}

	.header-conatiner {
		position: absolute;
		top: 0;
		z-index: 11;
	}





	.more_live_btn {
		position: absolute;
		right: 0;
		top: 245px;
		z-index: 1004;
	}

	.landscape-live-box>>>.van-notice-bar {
		position: absolute;
		width: 100vw;
		height: 50px;
		background-color: rgba(0, 145, 255, 0.5);
		line-height: 50px;
		font-size: 26px;
		color: white;
		z-index: 1000;
	}

	.landscape-live-box>>>.van-notice-bar__left-icon {
		font-size: 28px;
		padding-right: 10px;
	}

	.middle-nav-box+.pop-up-child,
	.middle-nav-box+.pop-up-child {
		height: calc(100vh - 564px);
	}

	.middle-nav-box+.pop-up-child,
	.middle-nav-box+.pop-up-child>>>.main-box {
		position: static;
	}

	.landscape-live-box>>>.gift-panel-wrap {
		z-index: 1501;
	}

	.canvas-box {
		width: 646px;
		height: 992px;
		margin: 0 auto;
		background: white;
		display: none;
		position: absolute;
		top: 20px;
		left: 20px;
		z-index: 2222;
		border-radius: 26px;
	}
	.canvas-img{
		width: 648px;
		height: 994px;
		position: absolute;
		top: 100px;
		left: 50px;
		z-index: 11111;
	}
  .landscape-live-box>>>.van-notice-bar.animate__animated{
    top: 630px!important;
  }

</style>
